<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>


<!--		switchControl.min.js
<script>
/***
* anthor: Mao wl
* switch control Plug-in
*
* based on Jquery
* 
	demo:
	$('#switchWrap').switchControl({
		slideSpeed: 300,					//content cutover speed
		controlTo: $('#contentWrape'),		//be controlled wrap
		contentDefaultNum: 0,				//default content number, start from 0
		checkRevertDefault_interval: 600	//the interval revert to default content while cursor not hover on switchWrap or contentWrape
	});
*
**/
(function(a){a.fn.switchControl=function(c){var e=a.extend({},{slideSpeed:300,controlTo:{},contentDefaultNum:0,checkRevertDefault_interval:1500},c);var b={t:""};var f=function(h){var i=0;a.each(h.prevAll(),function(){i+=a(this).width()});a("#switchControlWrap").animate({left:-i},e.slideSpeed)};var g=function(h,i){if(!h.hasClass("hover")&&!e.controlTo.hasClass("hover")){f(i)}};var d=function(h){var i=a("#switchControlWrap").children().eq(h);var j=0;a.each(i.prevAll(),function(){j+=a(this).width()});a("#switchControlWrap").animate({left:-j},e.slideSpeed)};return a(this).each(function(){var i=a(this);var h=0;var j=0;a.each(e.controlTo.children(),function(){if(a(this).height()>j){j=a(this).height()}h+=a(this).width()});e.controlTo.children().wrapAll("<div id='switchControlWrap' style='position:absolute; width:"+h+"; height:"+j+"'></div>");var k=a("#switchControlWrap").children().eq(e.contentDefaultNum);a("#switchControlWrap").append(k);f(k);i.hover(function(){a(this).addClass("hover")},function(){a(this).removeClass("hover");clearTimeout(b.t);b.t=setTimeout(function(){g(i,k)},e.checkRevertDefault_interval)});e.controlTo.hover(function(){a(this).addClass("hover")},function(){a(this).removeClass("hover");clearTimeout(b.t);b.t=setTimeout(function(){g(i,k)},e.checkRevertDefault_interval)});a.each(i.children(),function(){a(this).click(function(){var l=a(this).index();d(l)})});g(i,k)})}})(jQuery);
</script>
-->

<script>
/***
* anthor: Mao wl
* switch control Plug-in
*
* based on Jquery
* 
	demo:
	$('#switchWrap').switchControl({
		slideSpeed: 300,					//content cutover speed
		controlTo: $('#contentWrape'),		//be controlled wrap
		contentDefaultNum: 0,				//default content number, start from 0
		checkRevertDefault_interval: 600	//the interval revert to default content while cursor not hover on switchWrap or contentWrape
	});
*
**/
(function($){
	$.fn.switchControl = function(options){
		var opts = $.extend({}, 
							{	
								/*options*/
								slideSpeed: 300,
								controlTo: {},
								contentDefaultNum: 0,
								checkRevertDefault_interval: 1500
							},
							options);
							
		var switchControlNameSpace = {
			t: ''
		};

		var revertDefault = function(contentDefault){
			var defaultPrevsWidth = 0;
			$.each(contentDefault.prevAll(), function(){
				defaultPrevsWidth += $(this).width();
			});
			$('#switchControlWrap').animate({left: -defaultPrevsWidth}, opts.slideSpeed);		
		};
		
		var checkRevertDefault = function(element, contentDefault){
			if(!element.hasClass('hover') && !opts.controlTo.hasClass('hover')){
				revertDefault(contentDefault);
			}
		};
		
		var switchControlFunc = function(switchIndex){
			var beControlledObj = $('#switchControlWrap').children().eq(switchIndex);
			var prevsWidth = 0;
			$.each(beControlledObj.prevAll(), function(){
				prevsWidth += $(this).width();
			});
			$('#switchControlWrap').animate({left: -prevsWidth}, opts.slideSpeed);
		};
		
		return $(this).each(function(){
			var element = $(this);
			var totalWidth = 0;
			var maxHeight = 0;
			$.each(opts.controlTo.children(), function(){
				if($(this).height() > maxHeight){
					maxHeight = $(this).height();
				}
				totalWidth += $(this).width();
			});
			opts.controlTo.children().wrapAll("<div id='switchControlWrap' style='position:absolute; width:"+totalWidth+"; height:"+maxHeight+"'></div>");
			var contentDefault = $('#switchControlWrap').children().eq(opts.contentDefaultNum);
			$('#switchControlWrap').append(contentDefault);
			revertDefault(contentDefault);
			
			element.hover(
				function () {
					$(this).addClass("hover");
				},
				function () {
					$(this).removeClass("hover");
					clearTimeout(switchControlNameSpace.t);
					switchControlNameSpace.t = setTimeout(function(){checkRevertDefault(element, contentDefault);}, opts.checkRevertDefault_interval);
				}
			);
			
			opts.controlTo.hover(
				function () {
					$(this).addClass("hover");
				},
				function () {
					$(this).removeClass("hover");
					clearTimeout(switchControlNameSpace.t);
					switchControlNameSpace.t = setTimeout(function(){checkRevertDefault(element, contentDefault);}, opts.checkRevertDefault_interval);
				}
			);
			
			$.each(element.children(), function(){
				$(this).click(function(){
					var switchIndex = $(this).index();
					switchControlFunc(switchIndex);
				});
			});
			
			checkRevertDefault(element, contentDefault);
		});
	};
})(jQuery);
</script>

<style type="text/css">
	#switchWrap{
		list-style:none;
	}

	.switch{
		width:90px;
		height:20px;
		background-color:#000;
		color:#FFF;
		text-align:center;
		display:block;
		float:left;
		margin-left:5px;
		cursor:pointer;
	}
	
	#contentWrape{
		width:500px;
		height:360px;
		margin:auto;
		border:solid 1px #123123;
		position:relative;
		overflow:hidden;
	}
	
	#contentWrape div{
		width:500px;
		height:360px;
		float:left;
	}
</style>

<div id="allcontent">
	<ul id="switchWrap">
		  <li class="switch">滑门1</li>
		  <li class="switch">滑门2</li>
		  <li class="switch">滑门3</li>
		  <li class="switch">滑门4</li>
		  <li class="switch">滑门5</li>
		  <li class="switch">滑门6</li>
	</ul>
	
	<div id="contentWrape">
	  <div>默认内容区</div>
	  <div>内容块1</div>
	  <div>内容块2</div>
	  <div>内容块3</div>
	  <div>内容块4</div>
	  <div>内容块5</div>
	  <div>内容块6</div>
	</div>
</div>


<script>
	$('#switchWrap').switchControl({
		slideSpeed: 300,
		controlTo: $('#contentWrape'),
		contentDefaultNum: 0,
		checkRevertDefault_interval: 600
	});
</script>